<!DOCTYPE html>
        <html>
        <head>
            <meta charset="UTF-8">
            <title>&#x8bfe;&#x7a0b;&#x5206;&#x4eab;&#x70b9;&#x540d;&#x7cfb;&#x7edf;&#x9700;&#x6c42;&#x6587;&#x6863;</title>
            <style>
/* From extension vscode.github */
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.vscode-dark img[src$=\#gh-light-mode-only],
.vscode-light img[src$=\#gh-dark-mode-only],
.vscode-high-contrast:not(.vscode-high-contrast-light) img[src$=\#gh-light-mode-only],
.vscode-high-contrast-light img[src$=\#gh-dark-mode-only] {
	display: none;
}

</style>
            
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Microsoft/vscode/extensions/markdown-language-features/media/markdown.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Microsoft/vscode/extensions/markdown-language-features/media/highlight.css">
<style>
            body {
                font-family: -apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', system-ui, 'Ubuntu', 'Droid Sans', sans-serif;
                font-size: 14px;
                line-height: 1.6;
            }
        </style>
        <style>
.task-list-item {
    list-style-type: none;
}

.task-list-item-checkbox {
    margin-left: -20px;
    vertical-align: middle;
    pointer-events: none;
}
</style>
<style>
:root {
  --color-note: #0969da;
  --color-tip: #1a7f37;
  --color-warning: #9a6700;
  --color-severe: #bc4c00;
  --color-caution: #d1242f;
  --color-important: #8250df;
}

</style>
<style>
@media (prefers-color-scheme: dark) {
  :root {
    --color-note: #2f81f7;
    --color-tip: #3fb950;
    --color-warning: #d29922;
    --color-severe: #db6d28;
    --color-caution: #f85149;
    --color-important: #a371f7;
  }
}

</style>
<style>
.markdown-alert {
  padding: 0.5rem 1rem;
  margin-bottom: 16px;
  color: inherit;
  border-left: .25em solid #888;
}

.markdown-alert>:first-child {
  margin-top: 0
}

.markdown-alert>:last-child {
  margin-bottom: 0
}

.markdown-alert .markdown-alert-title {
  display: flex;
  font-weight: 500;
  align-items: center;
  line-height: 1
}

.markdown-alert .markdown-alert-title .octicon {
  margin-right: 0.5rem;
  display: inline-block;
  overflow: visible !important;
  vertical-align: text-bottom;
  fill: currentColor;
}

.markdown-alert.markdown-alert-note {
  border-left-color: var(--color-note);
}

.markdown-alert.markdown-alert-note .markdown-alert-title {
  color: var(--color-note);
}

.markdown-alert.markdown-alert-important {
  border-left-color: var(--color-important);
}

.markdown-alert.markdown-alert-important .markdown-alert-title {
  color: var(--color-important);
}

.markdown-alert.markdown-alert-warning {
  border-left-color: var(--color-warning);
}

.markdown-alert.markdown-alert-warning .markdown-alert-title {
  color: var(--color-warning);
}

.markdown-alert.markdown-alert-tip {
  border-left-color: var(--color-tip);
}

.markdown-alert.markdown-alert-tip .markdown-alert-title {
  color: var(--color-tip);
}

.markdown-alert.markdown-alert-caution {
  border-left-color: var(--color-caution);
}

.markdown-alert.markdown-alert-caution .markdown-alert-title {
  color: var(--color-caution);
}

</style>
        
        </head>
        <body class="vscode-body vscode-light">
            <h1 id="课程分享点名系统需求文档">课程分享点名系统需求文档</h1>
<h2 id="1-项目背景">1. 项目背景</h2>
<p>为了促进学员之间的交流学习和面试能力提升，设计一个课程分享点名系统。每天早上讲师会点名三位学员进行昨天的课程内容分享，这三位学员随后需要邀请其他5位同学进行面试提问环节。</p>
<h3 id="11-核心规则">1.1 核心规则</h3>
<ul>
<li>每天点名3人做课程内容分享</li>
<li>近期3天内不可重复点名同一人</li>
<li>被点名的3人各自需邀请5位面试官进行提问</li>
<li>确保全员都有被点名的机会，不重不漏</li>
</ul>
<h2 id="2-业务目标">2. 业务目标</h2>
<h3 id="21-主要目标">2.1 主要目标</h3>
<ol>
<li>通过点名机制促进全员成长</li>
<li>培养积极期待被点名的氛围</li>
<li>鼓励主动预约点名机制</li>
<li>记录面试问题的不足点，便于复盘统计</li>
<li>实现奖励排行榜</li>
<li>设置面试评分机制</li>
<li>增加offer发放的仪式感</li>
</ol>
<h2 id="3-功能模块设计">3. 功能模块设计</h2>
<h3 id="31-点名历史记录页面">3.1 点名历史记录页面</h3>
<h4 id="功能描述">功能描述</h4>
<ul>
<li>展示历史点名记录</li>
<li>统计个人被点名次数</li>
</ul>
<h4 id="页面元素">页面元素</h4>
<ul>
<li>时间筛选器</li>
<li>历史记录列表
<ul>
<li>点名时间</li>
<li>学员姓名</li>
<li>被点名次数统计</li>
</ul>
</li>
<li>导出功能</li>
</ul>
<h3 id="32-名单管理页面">3.2 名单管理页面</h3>
<h4 id="功能描述-1">功能描述</h4>
<ul>
<li>管理全部学员名单</li>
<li>支持批量导入名单</li>
</ul>
<h4 id="页面元素-1">页面元素</h4>
<ul>
<li>导入名单功能（支持Excel导入）</li>
<li>名单列表展示
<ul>
<li>学员基本信息</li>
<li>编辑/删除功能</li>
</ul>
</li>
<li>手动添加学员功能</li>
</ul>
<h3 id="33-点名页面">3.3 点名页面</h3>
<h4 id="功能描述-2">功能描述</h4>
<ul>
<li>展示点名进度</li>
<li>执行点名操作</li>
<li>记录面试过程</li>
<li>展示奖金排行</li>
</ul>
<h4 id="页面元素及交互逻辑">页面元素及交互逻辑</h4>
<ol>
<li>
<p>点名进度区（顶部）</p>
<ul>
<li>进度显示
<ul>
<li>格式：已点名人数/总人数（例如：15/30）</li>
<li>配合进度条可视化展示</li>
<li>实时更新，每完成一次点名自动刷新</li>
</ul>
</li>
</ul>
</li>
<li>
<p>点名操作区（中间主区域）<br>
a. 随机点名按钮</p>
<ul>
<li>状态变化：
<ul>
<li>默认状态：显示&quot;开始点名&quot;，蓝色背景</li>
<li>点击后：显示抽奖动画，按钮暂时禁用</li>
<li>结果展示：动画结束后显示3名被选中学员</li>
</ul>
</li>
<li>交互流程：
<ul>
<li>点击按钮触发随机选择</li>
<li>3秒抽奖动画展示</li>
<li>结果逐个显示，每个间隔0.5秒</li>
<li>选中结果可以重新随机（重置按钮）</li>
</ul>
</li>
<li>随机选择算法：
<ul>
<li>优先选择求职次数较少的学员</li>
<li>确保每个人的求职次数尽量均衡</li>
<li>近3天内不重复选择同一人</li>
</ul>
</li>
</ul>
<p>b. 被点名学员信息展示</p>
<ul>
<li>布局：三个并排的学员卡片</li>
<li>每个卡片包含：
<ul>
<li>学员头像（求职者头像使用红色边框标识）</li>
<li>姓名</li>
<li>历史求职次数</li>
<li>历史面试次数</li>
<li>&quot;邀请面试官&quot;按钮</li>
</ul>
</li>
<li>交互逻辑：
<ul>
<li>初始状态：邀请按钮可点击</li>
<li>点击邀请按钮：
<ol>
<li>弹出面试官选择面板</li>
<li>可选择5位面试官</li>
<li>已选满5位后，其他面试官选项置灰</li>
<li>确认选择后关闭面板</li>
</ol>
</li>
</ul>
</li>
</ul>
<p>c. 面试官区域（每个学员卡片下方）</p>
<ul>
<li>布局：5个面试官卡片</li>
<li>每个面试官卡片包含：
<ul>
<li>面试官头像（面试官头像使用蓝色边框标识）和姓名</li>
<li>提问内容输入框</li>
<li>&quot;会&quot;/&quot;不会&quot;评分按钮</li>
<li>奖励金额显示</li>
</ul>
</li>
<li>交互逻辑：
<ul>
<li>面试官选择算法：
<ol>
<li>优先选择面试次数较少的学员</li>
<li>确保每个人的面试次数尽量均衡</li>
</ol>
</li>
<li>提问记录：
<ol>
<li>面试官输入问题内容</li>
<li>输入完成后自动保存</li>
<li>可随时修改问题内容</li>
</ol>
</li>
<li>评分操作：
<ol>
<li>点击&quot;会&quot;按钮：
<ul>
<li>按钮变为绿色</li>
<li>显示&quot;+300元&quot;（给求职者）</li>
<li>更新奖金排行榜</li>
</ul>
</li>
<li>点击&quot;不会&quot;按钮：
<ul>
<li>按钮变为红色</li>
<li>显示&quot;+300元&quot;（给面试官）</li>
<li>更新奖金排行榜</li>
</ul>
</li>
<li>评分后按钮锁定，不可更改</li>
</ol>
</li>
</ul>
</li>
</ul>
</li>
<li>
<p>奖金排行区（右侧）</p>
<ul>
<li>总奖金排行榜：
<ul>
<li>显示前10名</li>
<li>包含：
<ul>
<li>学员姓名</li>
<li>总奖金（求职奖金 + 面试奖金）</li>
<li>求职次数统计</li>
<li>面试次数统计</li>
<li>实时更新，有动画效果</li>
</ul>
</li>
</ul>
</li>
<li>更新逻辑：
<ul>
<li>每次评分后实时更新</li>
<li>排名变化有动画过渡</li>
<li>新增奖金闪烁提示</li>
</ul>
</li>
</ul>
</li>
<li>
<p>自动保存和状态管理</p>
<ul>
<li>所有操作实时保存到后端</li>
<li>页面刷新后保持当前状态</li>
<li>断网时本地缓存，恢复网络后自动同步</li>
<li>每个操作都有loading和结果反馈</li>
<li>错误操作有友好提示，可撤销</li>
</ul>
</li>
</ol>
<h3 id="34-面试题复盘页面">3.4 面试题复盘页面</h3>
<h4 id="功能描述-3">功能描述</h4>
<ul>
<li>记录所有面试题目</li>
<li>统计答题情况</li>
</ul>
<h4 id="页面元素-2">页面元素</h4>
<ul>
<li>面试题列表
<ul>
<li>求职者信息</li>
<li>面试时间</li>
<li>面试题内容</li>
<li>答题结果</li>
</ul>
</li>
<li>数据筛选功能</li>
<li>导出功能</li>
</ul>
<h2 id="4-用户故事">4. 用户故事</h2>
<h3 id="故事1日常点名流程">故事1：日常点名流程</h3>
<p>作为讲师，我想要：</p>
<ul>
<li>在早上打开系统进行点名</li>
<li>系统随机选择3名未被点到的学员</li>
<li>确保这3名学员在近3天内未被点到过</li>
<li>查看这些学员的历史点名记录</li>
</ul>
<p>验收标准：</p>
<ol>
<li>能成功随机选择3名符合条件的学员</li>
<li>显示选中学员的基本信息和历史记录</li>
<li>可以重新随机选择如果对当前结果不满意</li>
</ol>
<h3 id="故事2面试官邀请流程">故事2：面试官邀请流程</h3>
<p>作为被点名的学员，我想要：</p>
<ul>
<li>选择5位同学作为我的面试官</li>
<li>记录每位面试官的提问内容</li>
<li>标记我对每个问题的回答情况</li>
</ul>
<p>验收标准：</p>
<ol>
<li>能够选择5位不重复的面试官</li>
<li>可以记录每个面试官的提问内容</li>
<li>能够标记每个问题的回答情况（会/不会）</li>
<li>系统自动计算并发放相应奖励</li>
</ol>
<h2 id="5-测试用例">5. 测试用例</h2>
<h3 id="51-点名功能测试">5.1 点名功能测试</h3>
<h4 id="测试用例1随机点名">测试用例1：随机点名</h4>
<p>前置条件：</p>
<ul>
<li>系统中已有30名学员信息</li>
<li>今天未进行过点名</li>
</ul>
<p>测试步骤：</p>
<ol>
<li>进入点名页面</li>
<li>点击随机点名按钮</li>
<li>查看被选中的3名学员信息</li>
</ol>
<p>预期结果：</p>
<ul>
<li>成功选出3名不同的学员</li>
<li>这3名学员在近3天内未被点到过</li>
<li>显示选中学员的基本信息</li>
</ul>
<h4 id="测试用例2面试官邀请">测试用例2：面试官邀请</h4>
<p>前置条件：</p>
<ul>
<li>已完成今日点名</li>
<li>被点名学员已登录系统</li>
</ul>
<p>测试步骤：</p>
<ol>
<li>被点名学员进入面试官邀请页面</li>
<li>选择5位面试官</li>
<li>记录面试过程</li>
<li>标记答题情况</li>
</ol>
<p>预期结果：</p>
<ul>
<li>成功选择5位不重复的面试官</li>
<li>能够记录每个面试官的提问内容</li>
<li>正确记录答题情况</li>
<li>系统正确计算并发放奖励</li>
</ul>
<h3 id="52-奖励机制测试">5.2 奖励机制测试</h3>
<h4 id="测试用例3奖励发放">测试用例3：奖励发放</h4>
<p>前置条件：</p>
<ul>
<li>面试环节已完成</li>
<li>已记录所有答题情况</li>
</ul>
<p>测试步骤：</p>
<ol>
<li>系统计算求职者奖励（1000元/人）</li>
<li>系统计算面试官奖励（会-300元/题）</li>
<li>更新奖金排行榜</li>
</ol>
<p>预期结果：</p>
<ul>
<li>正确计算并发放求职者奖励</li>
<li>正确计算并发放面试官奖励</li>
<li>奖金排行榜数据更新</li>
</ul>
<h2 id="6-非功能需求">6. 非功能需求</h2>
<h3 id="61-性能需求">6.1 性能需求</h3>
<ul>
<li>页面加载时间不超过2秒</li>
<li>点名随机算法响应时间不超过1秒</li>
<li>支持30人以上的名单管理</li>
</ul>
<h3 id="62-安全需求">6.2 安全需求</h3>
<ul>
<li>讲师账号权限管理</li>
<li>学员数据保护</li>
<li>奖励发放记录留痕</li>
</ul>
<h3 id="63-可用性需求">6.3 可用性需求</h3>
<ul>
<li>界面简洁直观</li>
<li>操作流程清晰</li>
<li>提供必要的操作提示</li>
<li>支持数据导出功能</li>
</ul>
<h2 id="7-ui设计要求">7. UI设计要求</h2>
<h3 id="71-整体布局">7.1 整体布局</h3>
<ul>
<li>采用响应式布局设计</li>
<li>顶部导航栏固定显示</li>
<li>左侧菜单可折叠</li>
<li>主内容区域自适应</li>
</ul>
<h3 id="72-点名页面布局">7.2 点名页面布局</h3>
<ul>
<li>上方显示点名进度和操作区
<ul>
<li>大型随机点名按钮，带抽奖动画效果</li>
<li>显示已点名/总人数进度条</li>
</ul>
</li>
<li>中间区域分为左右两栏
<ul>
<li>左侧显示被点名学员信息卡片
<ul>
<li>每个卡片包含头像、姓名、被点名次数</li>
<li>卡片右侧设置邀请面试官按钮</li>
</ul>
</li>
<li>右侧为面试官区域
<ul>
<li>显示已选择的面试官信息</li>
<li>每个面试官卡片包含提问内容输入框</li>
<li>答题情况按钮（会/不会）带奖励金额显示</li>
</ul>
</li>
</ul>
</li>
<li>底部显示奖金排行榜
<ul>
<li>分为求职者和面试官两个排行榜</li>
<li>实时更新奖励金额变化</li>
</ul>
</li>
</ul>
<h3 id="73-交互设计">7.3 交互设计</h3>
<ul>
<li>点名按钮
<ul>
<li>悬停放大效果</li>
<li>点击触发抽奖动画</li>
<li>结果展示渐显动效</li>
</ul>
</li>
<li>学员信息卡片
<ul>
<li>阴影浮动效果</li>
<li>邀请按钮状态变化</li>
</ul>
</li>
<li>面试官选择
<ul>
<li>弹出选择面板</li>
<li>已选择面试官高亮显示</li>
<li>超出限制提示</li>
</ul>
</li>
<li>答题记录
<ul>
<li>会/不会按钮带动画反馈</li>
<li>奖励金额变化动画</li>
</ul>
</li>
<li>排行榜更新
<ul>
<li>数据变化平滑过渡</li>
<li>排名变化动画效果</li>
</ul>
</li>
</ul>
<h3 id="74-视觉优化">7.4 视觉优化</h3>
<ul>
<li>配色方案
<ul>
<li>主色调：#1890ff（科技蓝）</li>
<li>辅助色：#52c41a（成功绿）、#f5222d（警示红）</li>
<li>中性色：#f0f2f5（背景灰）</li>
</ul>
</li>
<li>字体设计
<ul>
<li>主标题：20px</li>
<li>副标题：16px</li>
<li>正文：14px</li>
<li>使用系统默认字体栈</li>
</ul>
</li>
<li>动效设计
<ul>
<li>页面切换过渡动画</li>
<li>数据更新渐变效果</li>
<li>操作反馈动画</li>
</ul>
</li>
<li>响应式适配
<ul>
<li>断点设置：xs(480px) sm(576px) md(768px) lg(992px) xl(1200px)</li>
<li>布局自适应调整</li>
<li>内容展示优化</li>
</ul>
</li>
</ul>

            
            
        </body>
        </html>